<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">

  <ui:composition template="./headerView.xhtml">
	<ui:define name="content">
	  <h:form align="left" >	
		<h:commandLink action="#{shopCart.previousScreen}" value="Previous" />
		<h:outputText value="   " />
		<h:commandLink action="#{shopCart.nextScreen}" value="Next" />		
		<h:dataTable value="#{shopCart.petsShoppingCartView}" var="item" bgcolor="#F1F1F1" border="10" first="0" width="100%" frame="hsides" rules="all"  >
 			<f:facet name="header">			
  			<h:outputText align="center" value="Shopping Cart (#{shopCart.numberPets} pets)"/>	
  			</f:facet>
  			<h:column>
   				<p align="center"><h:graphicImage border="0" url="resources/imganimals/#{item.photo}" width="100"/></p>
 			</h:column>
 			<h:column>
   				<f:facet name="header">
   					<h:outputText value="Id" />
   				</f:facet> 
   				<p align="center"><h:outputText value="#{item.id}" /></p>
 			</h:column>
 			<h:column>
   				<f:facet name="header">
   					<h:outputText value="Name"/>
   				</f:facet> 
     			<p align="center"><h:outputText value="#{item.name}"/></p>
 			</h:column>
 			<h:column>
   				<f:facet name="header">
   					<h:outputText value="Price"/>
   				</f:facet>
     			<p align="center"><h:outputText align="center" value="#{item.price}" >
     				<f:convertNumber type="currency"/>			
     			</h:outputText></p>
 			</h:column>
 			<h:column>
   				<f:facet name="header">
   					<h:outputText value="Description"/>
   				</f:facet>
     			<p align="center"><h:outputText value="#{item.description}" style="align:center"/></p>
 			</h:column>
 			<h:column>
   				<f:facet name="header">
   					<h:outputText value="Category"/>
   				</f:facet>
    			<p align="center"><h:outputText value="#{item.category.name}" style="align:center"/></p>
 			</h:column>
 			<h:column>
 				<p align="center">
					<h:commandLink value="Remove from Cart" action="#{removePet.removePetFromShoppingCart}" onclick="return confirm('Are you sure?')">
						<f:param name="idPet" value="#{item.id}" />						
					</h:commandLink>
				</p>	
 			</h:column>
 		</h:dataTable>
 		
					<h:commandButton align="left" value="New   Order" immediate="true" action="#{neworder.Customer}">
										</h:commandButton>
 	  </h:form>		
	</ui:define>
  </ui:composition>
</html>
